<template>
  <div class="page35" v-loading="loading">
    <div class="page-title">收入环比分析—码号收入</div>
    <div class="page-content">
      <div class="left-content">
        <!-- <div class="content1">7月码号收入环比增加226万元。</div> -->
        <ul class="content2">
          <li>主要收入下降点：</li>
          <li>{{declineOne}}</li>
          <li>{{declineTwo}}</li>
          <li>{{declineThree}}</li>
        </ul>
        <ul class="content3">
          <li>主要收入增长点：</li>
          <li>{{riseOne}}</li>
          <li>{{riseTwo}}</li>
          <li>{{riseThree}}</li>
        </ul>
      </div>
      <div class="tableBox">
        <el-table
          border
          stripe
          height="calc(100vh - 130px)"
          :data="tableData"
          style="width: 100%"
          class="tableTh28"
          ref="table"
          :span-method="spanMethod"
          :header-cell-class-name="headerClass"
        >
          <el-table-column
            v-for="item in columns"
            :key="item.prop"
            :label="item.label"
            :prop="item.prop"
            align="center"
            min-width="70"
          ></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import { mergeSpan } from "@/utils/mixin.js";
import { $budgetAPI } from "@/api";
export default {
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  },  
  data(){
    return {
      loading: false,
      tableData: [],
      columns: [],
      spanArr: [],

      mhIncrease: "",
      declineOne: "",
      declineTwo: "",
      declineThree: "",
      riseOne: "",
      riseTwo: "",
      riseThree: "",
    }
  },
  created(){
    
  },
  methods: {
    getData(){
      this.loading = true;
      $budgetAPI.getCountyOperationPage35(
        { token: this.form.token, areaId: this.form.areaId, acctMonth: this.form.month },
        res => {
          if(res.code == 0){
            const { data, key, name, declineOne, declineTwo, 
                    declineThree, riseOne, riseTwo, riseThree,
                  } = res.content;
            this.declineOne = declineOne;
            this.declineTwo = declineTwo;
            this.declineThree = declineThree;
            this.riseOne = riseOne;
            this.riseTwo = riseTwo;
            this.riseThree = riseThree;

            name.unshift(name[0]);
            this.columns = key.map((it, i) => {
              return {
                prop: it,
                label: name[i]
              }
            })

            this.tableData = data;
            this.spanArr = mergeSpan(this.tableData, ["class1", "class2"]);
            this.mergeHeader();
          }
          this.loading = false;
        },
        err => {
          console.log(err);
          this.loading = false;
        }
      )
    },
    spanMethod({ rowIndex, columnIndex }){
      if (columnIndex <= 1) {
        return this.spanArr[rowIndex][columnIndex];
      }
    },
    headerClass({rowIndex, columnIndex}){
      if(rowIndex === 0){
        if (columnIndex === 0) {
          return 'header-row-colspan-2';
        }
        if (columnIndex === 1) {
          return 'row-display';
        }        
      }
    },
    async mergeHeader(){
      await this.$nextTick();
      for(let dom of document.querySelectorAll(".header-row-colspan-2")){
        dom.setAttribute("colspan", "2");
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.page35 {
  padding: 20px 0 10px 20px;
  border: 1px solid #dee5f3;
  border-radius: 5px;
  margin-top: 20px;
  .page-title {
    text-align: center;
    font-size: 20px;
    font-weight: 900;
  }
  .page-content {
    display: flex;
    margin-top: 20px;
    .left-content {
      width: 300px !important;
      padding: 0 10px 0 25px;
      box-sizing: border-box;
      .content1 {
        font-size: 18px;
        font-weight: 600;
        color: rgb(192,0,0);
        position: relative;
        &::before {
          content: "";
          position: absolute;
          left: -22px;
          top: 6px;
          width: 12px;
          height: 12px;
          background-color: rgb(192,0,0);
          transform: rotate(45deg);
        }
      }
      > ul {
        margin-top: 50px;
        font-size: 16px;
        > li{
          line-height: 30px;
          position: relative;
          &::before {
            content: "\2714";
            font-size: 16px;
            position: absolute;
            left: -22px;
            top: 0;
          }
          &:first-child {
            color: blue;
            font-weight: 600;
            &::before {
              content: "";
            }
          }
        }
      }
    }
  }
}
.tableBox {
  flex: 1 !important;
  // width: 100%;
  max-width: calc(100vw - 430px);
  margin-right: 10px;
  border-top: 1px solid #9abcf1;
  border-left: 1px solid #bfbfbf;
  border-right: 1px solid #bfbfbf;
  border-bottom: 1px solid #bfbfbf;
  /deep/ .el-table.tableTh28 {
    .cell {
      padding: 0 !important;
      // zoom: 0.9;
      // font-size: 10px;
    }
    th {
      height: 23px;
      padding: 0;
      .cell {
        line-height: 20px;
        height: 20px;
      }
    }

    /deep/ tr.el-table__row td {
      padding: 0 !important;
    }
  }
  /deep/ .tableTh28 .el-table__header {
    .first-title.is-leaf {
      position: relative;
      border-right: 1px solid #d7e5fb !important;
      .cell {
        color: #d7e5fb;
      }
    }

    .second-title.is-leaf {
      position: relative;
      border-right: 1px solid #d7e5fb !important;
      .cell {
        color: #d7e5fb;
      }
    }
    .third-title.is-leaf {
      overflow: visible;
      .cell {
        width: 300%;
        left: -150%;
      }
    }
  }
  /deep/ .el-table tr:last-child td {
    color: #333;
    text-align: center;
    border-bottom: 1px solid transparent !important;
    border-right: 1px solid #bfbfbf !important;
  }
}
/deep/ .row-display {
  display: none;
}
</style>